<template>
  <nut-config-provider :theme="theme" :theme-vars="themeVars">

    <view class="enterprise" :style="{backgroundColor: 'white',padding: themeVars.pagePadding}">
      <view  @click="imgPreState.showPreview=true;imgPreState.imgData  =[{src:enterpriseInfo.enterpriseLogo+ImgWaterMarker}]">
        <image mode="aspectFit" style=" box-sizing: border-box;width: 130px;height: 100px;" lazy-load
               :src="enterpriseInfo.enterpriseLogo+ImgWaterMarker"></image>

      </view>
      <view class="enterpriseInfo">
        <view class="enterpriseTop">
          <view style="font-size: 14px;font-weight: bolder;width: 160px" class="single-line-text">
            {{ enterpriseInfo.name }}
          </view>
          <view style="width: 50px;display: flex;justify-content: space-around;align-items: center"
                @click="follow(enterpriseInfo.id)">

            <IconFont v-if="enterpriseInfo.myIzFollow" name="s-follow" color="#f00"></IconFont>
            <IconFont v-else name="s-follow" color="#a8a8a8"></IconFont>
            <span :style="{fontSize: '10px',color: enterpriseInfo.myIzFollow?'#f00':'#a8a8a8'}">关注</span>
          </view>

        </view>
        <view style="margin-top: 10px;display: flex;justify-content: space-between">
          <view style="width: 120px;font-size: 12px" class="single-line-text">
            {{ enterpriseInfo.contactName }} {{ enterpriseInfo.contactPhone }}
          </view>
          <view style="width: 120px;font-size: 12px;text-align: left;color: #FF4600" class="single-line-text">
            访问量：{{ enterpriseInfo.scanNum }}
          </view>
        </view>
        <view class="shop-addr">
          地址：{{ enterpriseInfo.addrDetail }}
        </view>
      </view>
    </view>

    <view :style="{backgroundColor: themeVars.pageBackgroundColor,}">

      <nut-tabs v-model="value" :ellipsis="false" :title-gutter="10" auto-height>
        <nut-tab-pane title="主营产品" pane-key="1"
                      :style="{padding: '10px' ,background: themeVars.pageBackgroundColor } ">

          <SpecCommodity :data="item" v-for="item in mainList" style="margin-top: 2px"
                         @click="Taro.navigateTo({ url: '/pages/view/commodityInfo/index?id='+item.id })"/>
        </nut-tab-pane>
        <nut-tab-pane title="企业介绍" pane-key="2"
                      :style="{padding: '10px'  } ">
          <view>
            <view style="font-size: 12px;text-indent: 2em">
              {{ enterpriseInfo.enterpriseDesc }}
            </view>
            <!-- 资质-->
            <view class="" v-if="enterpriseInfo.enterpriseQualis" @click="imgPreState.showPreview=true;imgPreState.imgData  =enterpriseInfo.enterpriseQualis.split(',').map(url=>({src:url+ImgWaterMarker}))">
              <image v-for="img in enterpriseInfo.enterpriseQualis.split(',')"
                     mode="widthFix"
                     style=" box-sizing: border-box;width: 100%;margin-top: 2px"  lazy-load
                     :src="img+ImgWaterMarker"></image>
            </view>
            <!-- 场景-->
            <view class="" v-if="enterpriseInfo.enterpriseScene" @click="imgPreState.showPreview=true;imgPreState.imgData  =enterpriseInfo.enterpriseScene.split(',').map(url=>({src:url+ImgWaterMarker}))">
              <image v-for="img in enterpriseInfo.enterpriseScene.split(',')"
                     mode="widthFix"
                     style=" box-sizing: border-box;width: 100%;margin-top: 2px" lazy-load
                     :src="img+ImgWaterMarker"></image>
            </view>
          </view>

        </nut-tab-pane>
        <nut-tab-pane title="库存处理" pane-key="3"
                      :style="{padding: '10px' ,background: themeVars.pageBackgroundColor } ">
          <!--          <Opportunity v-for="i in 5"/>-->
          <SpecCommodity :data="item" v-for="item in stockList" style="margin-top: 2px"
                         @click="Taro.navigateTo({ url: '/pages/view/commodityInfo/index?id='+item.id })"/>
        </nut-tab-pane>
        <nut-tab-pane title="特价商品" pane-key="4"
                      :style="{padding: '10px' ,background: themeVars.pageBackgroundColor } ">
          <SpecCommodity :data="item" v-for="item in spePriceList" style="margin-top: 2px"
                         @click="Taro.navigateTo({ url: '/pages/view/commodityInfo/index?id='+item.id })"/>
        </nut-tab-pane>
      </nut-tabs>

    </view>
    <view class="fixed-bottom">
      <view
          @click="Taro.makePhoneCall({phoneNumber: enterpriseInfo.contactPhone})"
          style="height: 100%;width: 50%;background: #fc591a;display: flex;justify-content: center;align-items: center">
        <IconFont
            size="30"
            name="https://sdztl.oss-cn-hangzhou.aliyuncs.com/tuowulian-offline/images/other/%E7%94%B5%E8%AF%9D.png"
        ></IconFont>
        <view style="font-size: 13px;margin: 0 5px">电话联系</view>

      </view>


      <view
          @click="showWx=true"
          style="height: 100%;width: 50%;background: #00a22c;display: flex;justify-content: center;align-items: center">
        <IconFont
            size="30"
            name="https://sdztl.oss-cn-hangzhou.aliyuncs.com/tuowulian-offline/images/other/%E5%BE%AE%E4%BF%A1.png"
        ></IconFont>
        <view style="font-size: 13px;margin: 0 5px">微信沟通</view>

      </view>


    </view>
    <nut-action-sheet v-model:visible="showWx" title="微信沟通">
      <view style="padding: 0 10px">
        <view v-if="enterpriseInfo.wechatQrcode">
          <image v-for="img in enterpriseInfo.wechatQrcode.split(',')"
                 style=" box-sizing: border-box;width: 100%;height:400px;margin-top: 2px" lazy-load
                 mode="widthFix" :show-menu-by-longpress="true"
                 :src="img"></image>
        </view>
      </view>

    </nut-action-sheet>


    <nut-image-preview :show="imgPreState.showPreview" :images="imgPreState.imgData"
                       @close="imgPreState.showPreview = false"  @long-press="longPressSaveImg"/>


  </nut-config-provider>
</template>

<script>

import {ref} from 'vue';
import useTheme from "../../../hooks/useTheme";

import {IconFont, Image} from "@nutui/icons-vue";
import Taro from "@tarojs/taro";
import {twEnterpriseFollow, twEnterpriseGetById} from "../../../api/enterprise";
import {twProductEnterprisePage} from "../../../api/product";
import {longPressSaveImg} from "../../../utils/imgUtils";
import {ImgWaterMarker} from "../../../api/constant";


const {theme, themeVars} = useTheme()
const value = ref('1')
const enterpriseInfo = ref({})
const mainList = ref([])
const spePriceList = ref([])
const stockList = ref([])

const showWx = ref(false)

const follow = (id) => {
  twEnterpriseFollow({id: id}).then(res => {
    Taro.showToast({title: res.msg, icon: 'success', duration: 1500,});
    getEnterpriseInfo(id)
  }).finally(()=>{
    Taro.hideLoading();
  })
}

const getEnterpriseInfo = (id) => {
  twEnterpriseGetById(id).then(res => {
    enterpriseInfo.value = res.data
  })
}


const imgPreState = ref({
  showPreview: false,
  imgData: []
})

export default {
  methods: {longPressSaveImg},
  components: {IconFont},

  // 可以使用所有的 Vue 生命周期方法
  mounted() {
  },

  onLoad(options) {

    getEnterpriseInfo(options.id)
    twProductEnterprisePage({
      current: 1,
      size: 1000,
      productType: 'MAIN',
      enterpriseId: options.id,
      sortField: 'createTime',
      sortOrder: 'descend',auditStatus:"SUCCESS"
    }).then(res => {
      mainList.value = res.data.records

    })

    twProductEnterprisePage({
      current: 1,
      size: 1000,
      productType: 'SPE_PRICE',
      enterpriseId: options.id,
      sortField: 'createTime',
      sortOrder: 'descend',auditStatus:"SUCCESS"
    }).then(res => {
      spePriceList.value = res.data.records
    })

    twProductEnterprisePage({
      current: 1,
      size: 1000,
      productType: 'STOCK',
      enterpriseId: options.id,
      sortField: 'createTime',
      sortOrder: 'descend',auditStatus:"SUCCESS"
    }).then(res => {
      stockList.value = res.data.records
    })

  },

  onReady() {
  },

  onShow() {
  },

  onHide() {
  },

  onPullDownRefresh() {

  },
  onReachBottom() {
    console.log("onReachBottom")
  },


  setup() {


    return {
      theme,
      themeVars,

      Taro,
      value,
      enterpriseInfo,
      mainList,
      spePriceList,
      stockList,
      showWx,
      follow,
      imgPreState,
      ImgWaterMarker
    }
  }

}
</script>

<style>

.enterprise {
  display: flex;

}

.enterpriseInfo {
  margin-left: 10px;

}

.enterpriseTop {
  display: flex;
}

.shop-addr {
  font-size: 24px;
  color: #636363;
  margin-top: 10px;
  width: 450px;
  height: 60px;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #333; /* 背景颜色 */
  color: #fff; /* 字体颜色 */
  text-align: center; /* 文本居中 */
  display: flex;
  justify-content: space-between;
}
</style>